<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>
	<style>
	  #moveable{ font-size: 0px; line-height: 0px; position: absolute; top: 110px; left: 250px; width: 30px; height: 30px; border: 6px dashed red; }

		#static { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
		#staticChild1 { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color:  #092; }
		#staticChild2 { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }

		#relative { position: relative; top: 5px; left: 5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
		#relativeChild1 { position: relative; top: 5px; left: 5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color:  #092; }
		#relativeChild2 { position: relative; top: -5px; left: -5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }

		#absolute { position: absolute; top: 200px; right: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
		#absoluteChild1 { position: absolute; top: -100px; right: -10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color:  #092; }
		#absoluteChild2 { position: absolute; top: 100px; right: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }

		#absolute2 { position: absolute; top: 300px; left: 400px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #822; }
		#relative2 { position: relative; top: 50px; left: 50px; margin: 5px; border: 2px solid #000; padding: 3px; width: 300px; height: 300px; background-color: #092; }
		#static2 { overflow: hidden; position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 250px; height: 250px; background-color: #980; }
		#relative3 { overflow: auto; position: relative; top: 10px; left: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
		#absolute3 { position: absolute; top: 30px; right: -90px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #092; }
		#static3 { position: static; margin: 10px; border: 2px solid #000; padding: 3px; width: 250px; height: 250px; background-color: #980; }

		#inline { display: inline; border: 2px solid #000; }
		
		body {margin-top: 30px; margin-left: 20px;} 
	</style>
</head>
<body>

	<p>
	  Select a div to move the grey box too. (Quirks-Mode)
  	<select id="mode">
  	  <option value="margin">margin</option>
  	  <option value="box" selected="selected">box</option>
  	  <option value="border">border</option>
  	  <option value="scroll">scroll</option>
  	  <option value="padding">padding</option>
  	</select>
  	<a href="javascript:demobrowser.demo.bom.Location.randomize()">Randomize</a>
	</p>

	<ul id="list">
		<li><a href="#static">Move to static 1</a></li>
		<li><a href="#staticChild1">Move to static child 1</a></li>
		<li><a href="#staticChild2">Move to static child 2</a></li>
		<li><a href="#relative">Move to relative 1</a></li>
		<li><a href="#relativeChild1">Move to relative child 1</a></li>
		<li><a href="#relativeChild2">Move to relative child 2</a></li>
		<li><a href="#absolute">Move to absolute 1</a></li>
		<li><a href="#absoluteChild1">Move to absolute child 1</a></li>
		<li><a href="#absoluteChild2">Move to absolute child 2</a></li>
		<li><a href="#absolute2">Move to absolute 2</a></li>
		<li><a href="#relative2">Move to relative 2</a></li>
		<li><a href="#static2">Move to static 2</a></li>
		<li><a href="#relative3">Move to relative 3</a></li>
		<li><a href="#absolute3">Move to absolute 3</a></li>
		<li><a href="#static3">Move to static 3</a></li>
		<li><a href="#inline">Move to inline 1</a></li>
	</ul>

	<div id="static"> Static 1
		<div id="staticChild1"> Static Child 1
			<div id="staticChild2"> Static Child 2</div>
		</div>
	</div>

	<div id="relative"> Relative 1
		<div id="relativeChild1"> Relative Child 1
			<div id="relativeChild2"> Relative Child 2</div>
		</div>
	</div>

	<div id="absolute"> Absolute 1
		<div id="absoluteChild1"> Absolute Child 1
			<div id="absoluteChild2"> Absolute Child 2</div>
		</div>
	</div>

	<div id="absolute2"> Absolute 2
		<div id="relative2"> Relative 2
			<div id="static2"> Static 2
				<div id="relative3"> Relative 3
					<div id="absolute3"> Absolute 3
						<div id="static3"> Static 3
							<div id="inline">Inline 1</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="moveable"></div>
</body>
</html>
